﻿<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MedicalManagementSystem.Utils.PatientSearchModel>" %>
<%@ Import Namespace="MedicalManagementSystem.Helpers" %>
<style>
	#resutTable .ui-selecting 
	{ 
		background: #36A8CE; 
	}
	#resutTable .ui-selected  
	{
		background: #3672CE; color: white; 
	}
	#resutTable  
	{
		list-style-type: none; margin: 0; padding: 0; 
	}
	#resutTable li  
	{
		margin: 3px; padding: 0.4em; height: 18px; 
	}
</style>
<div id="searchPatientsForm">
    <a id="searchPatients" href="#">Найти</a>
    <div id="ajax-loading" style="display: none; margin-top: 10px;">
        <%= Html.Image(Url.Content("~/Content/images/ajax-loader.gif"), "Загрузка данных...", null)%>
        <br />
        Загрузка данных...
    </div>
    <br />
    <ol id="resutTable">
    </ol>
</div>
<div>
    <script language="javascript" type="text/javascript">
        var clientIdFiled = '<%=Model.ClientFieldId %>',
            clientViewField = '<%=Model.ClientViewFieldId %>',
            maxRows = '<%=Model.MaxRows %>',
            patientsDict;
        $(function () {
            $("#resutTable").selectable({
                selected: function (event, ui) {
                    var patientId = $(ui.selected).find('input[name="patientSearchGroup"]').val(),
                        input = patientsDict[patientId];
                    $('#' + clientIdFiled).val(patientId);
                    $('#' + clientViewField).val(input.initials);
                }
            });
        });
       
        $('#searchPatients').click(function () {
            clearTable();
            getPatient();
        });

        function clearTable() {
            $('#resutTable').fadeOut(function () {
                $('#resutTable li').remove();
                $('#ajax-loading').show()
            });
        };

        function getPatient() {
            $.ajax({
                url: "<%=Model.Url%>",
                datatype: 'json',
                data: 'searchPattern=' + $('#' + clientViewField).val() + '&maxRows=' + maxRows,
                type: 'POST',
                success: function (data) {
                    patientsDict = new Array();
                    $.map(data.FindedPatients, addPatientRow);
                    $('#ajax-loading').hide();
                    $('#resutTable').toggle(true);
                }
            });
        };

        function addPatientRow(item) {
            patientsDict[item.Id] = { initials: item.Initials, birthday: item.Birthday };
            $('#resutTable').append(
                $('<li class="ui-widget-content">').append(
                    $('<input type="hidden">').attr('name', 'patientSearchGroup').attr('value', item.Id),
                    item.Initials + " " + item.Birthday
                 )
            );
        };

    </script>
</div>
